<template>
  <div>
    <div class="box-play">
      <!-- 播放器 -->
      <div
        class="player"
        v-show="showplayer"
        :style="{ 'background-image': 'url(' + musiclistts.coverImgUrl + ')' }"
      >
        <div class="button" @click="showplayerFun(false)">
          <span class="iconfont icon-arrow-down-bold"></span>
        </div>

        <div class="title">
          <h2>{{ musiclistts.name }}</h2>
          <h3>
            <span v-for="(item, index) in musiclistts.ar" :key="index"
              >{{ item.name }} /
            </span>
          </h3>
        </div>

        <div class="pic"></div>
        <div class="content clearfix" @click="togglelyric = !togglelyric">
          <div
            v-show="togglelyric == true"
            :class="['img', 'play', { pause: iconplay }]"
          >
            <img
              :src="musiclistts.coverImgUrl"
              alt=""
              :class="['play', iconplay ? 'pause' : '']"
            />
          </div>

          <!-- 歌词 -->
          <div v-show="togglelyric != true" class="lyrics">
            <ul :style="{ top: lyricTop }">
              <li
                v-for="(item, index) in lyric"
                :class="{ con: currentRow === index }"
                :key="index"
              >
                {{ item.text }}
              </li>
            </ul>
          </div>
        </div>
        <div class="backcolo">
          <!-- 播放进度 -->
          <div class="range">
            <div class="bar">
              <span class="timeLeft">{{ timeleft | playertime }}</span>
              <van-slider
                v-model="value"
                bar-height="5px"
                active-color="#D4483D"
                @change="sliderchange"
              >
                <template #button>
                  <div class="custom-button"></div>
                </template>
              </van-slider>
              <span class="timeRight">{{ timeright | playertime }}</span>
            </div>
          </div>

          <!-- 播放按钮 -->
          <div class="buttons">
            <div
              v-if="playerType == 1"
              @click="changeMode"
              class="iconfont icon-xunhuan1"
            ></div>
            <div
              v-else
              class="iconfont icon-suiji"
              @click.stop="changeMode"
            ></div>
            <div
              class="iconfont icon-shangyiqu-wangyiicon"
              @click="startup"
            ></div>
            <div class="iconbutton" @click.stop="toggleplay">
              <span v-if="iconplay" class="iconfont icon-bofang1"></span>
              <span v-else class="iconfont icon-04"></span>
            </div>
            <div class="iconfont icon-shangyiqu" @click="lowerFun"></div>
            <div class="iconfont icon-shoucang1"></div>
          </div>
        </div>
      </div>
      <!-- 迷你版播放器 -->
      <div class="min-player" v-show="musiclistts.coverImgUrl">
        <div class="img" @click="showplayerFun(true)">
          <img
            :src="musiclistts.coverImgUrl"
            alt=""
            :class="['play', iconplay ? 'pause' : '']"
          />
        </div>
        <div class="text">
          <h2>{{ musiclistts.name }}</h2>
          <h3>
            <span v-for="(item, index) in musiclistts.ar" :key="index"
              >{{ item.name }} /
            </span>
          </h3>
        </div>
        <div class="control" @click.stop="toggleplay">
          <span v-if="iconplay" class="iconfont icon-bofang1"></span>
          <span v-else class="iconfont icon-pause-full"></span>
        </div>
        <div class="bflists">
          <span
            class="iconfont icon-bofangliebiao"
            @click="showplayerlistFun(true)"
          ></span>
        </div>
      </div>

      <!-- 播放列表 -->
      <div class="musicbflist" v-if="showplayerlist">
        <div class="content">
          <dl>
            <dd>
              <div v-if="playerType == 1">
                <span
                  class="iconfont icon-xunhuan1"
                  @click.stop="changeMode"
                ></span
                >顺序播放({{ musiclistts.tracks.length }})
                <span class="iconfont icon-shanchu" @click="cleardel"></span>
              </div>
              <div v-if="playerType == 2">
                <span
                  class="iconfont icon-suiji"
                  @click.stop="changeMode"
                ></span
                >随机播放({{ musiclistts.tracks.length }})
                <span class="iconfont icon-shanchu" @click="cleardel"></span>
              </div>

              <div class="musiclistser">
                <ul>
                  <li v-for="(item, index) in musiclistts.tracks" :key="index">
                    <div
                      class="music"
                      @click="
                        playmusic(item.id, item.name, item.ar, item.al.picUrl)
                      "
                    >
                      <h3>{{ item.name }}</h3>
                    </div>
                    <span
                      class="iconfont icon-close-bold"
                      @click="del(index)"
                    ></span>
                  </li>
                </ul>
              </div>
            </dd>
          </dl>
          <div class="close" @click="showplayerlistFun(false)">关闭</div>
        </div>
      </div>
      <audio
        ref="audio"
        controls
        :src="musiclistts.url"
        @canplay="canplayFun"
        @ended="musicEnd"
        hidden
      ></audio>
    </div>
  </div>
</template>

<script>
import { getSongUrl, getSongLyric } from "../../api/base";
export default {
  data() {
    return {
      iconplay: true,
      // musiclistts: {},
      showplayer: false,
      value: 0,
      timeright: 0,
      timeleft: 0,
      playerType: 1, //1列表播放  2 随机播放
      lyric: [], //歌词对象
      currentRow: 0,
      lyricTop: "300px",
      togglelyric: true,
      showplayerlist: false,
    };
  },
  watch: {
    musiclistts: {
      handler: function () {
        // console.log("watch",this.musiclistts);
        getSongUrl({ id: this.musiclistts.id }).then((data) => {
          // this.iconplay = true;
          this.$set(this.musiclistts, "url", data.data[0].url);
          //计算事件
        });
        this.getSongLyricFun();
      },
      deep: true,
    },
    timeleft: function () {
      for (let i = 0; i < this.lyric.length; i++) {
        if (parseInt(this.timeleft) == this.lyric[i].time) {
          this.currentRow = i; //文字选中切换
          this.lyricTop = 4.6875 - i * 0.78125 + "rem"; 
          break;
        }
      }
    },
  },
  methods: {
    // 音乐播放暂停
    toggleplay() {
      if (this.iconplay) {
        this.$refs.audio.play(); //播放
        clearInterval(this.clearset); //清除定时器
        // 设置定时器
        this.clearset = setInterval(() => {
          let currentTime = this.$refs.audio.currentTime;
          let duration = this.$refs.audio.duration;
          this.timeleft = currentTime;
          // 计算滑块位置
          // console.log("滑块位置",parseInt(currentTime/duration * 100));
          this.value = (currentTime / duration) * 100;
          if (this.value == 100) {
            clearInterval(this.clearset);
            this.$refs.audio.pause();
          }
        }, 999);
      } else {
        this.$refs.audio.pause();
        clearInterval(this.clearset);
        console.log("歌曲时间", this.$refs.audio.duration);
        console.log("播放时间", this.$refs.audio.currentTime);
      }
      // 切换按钮
      this.iconplay = !this.iconplay;
    },

    // 显示播放器
    showplayerFun(bol) {
      this.showplayer = bol;
      // console.log(this.$refs.audio.duration);
    },
    // 显示播放列表
    showplayerlistFun(bol) {
      this.showplayerlist = bol;
      console.log("111", this.musiclistts);
      // console.log(this.);
    },
    del(index) {
      this.musiclistts.tracks.splice(index, 1);
      // data.
      // console.log(this.musiclistts);
      console.log(this.iconplay);
      // this.iconplay = true
    },
    cleardel() {
      this.musiclistts.tracks.splice(0, this.musiclistts.tracks.length);
      // this.musicEnd.coverImgUrl = false
    },
    playmusic(id, name, ar, coverImgUrl) {
      let playmusiclistts = {
        coverImgUrl,
        id,
        name,
        ar,
        tracks: this.musiclistts.tracks,
      };
      // 数据存储
      this.$store.commit("musiclisttsFun", playmusiclistts);
    },

    // 进度条
    sliderchange() {
      console.log(this.value);
      let duration = (this.$refs.audio.duration * this.value) / 100;
      this.timeleft = duration; // 百分比
      this.$refs.audio.currentTime = duration; // 修改时间
    },

    // 上一曲
    startup() {
      if (this.musiclistts.tracks.length) {
        let { id, tracks } = this.musiclistts;
        // 返回数组下标
        // console.log(this.musiclistts);

        // console.log({ id, tracks, coverImgUrl });
        let index = tracks.findIndex((item) => {
          // console.log(item.id);
          return item.id == id;
        });
        console.log(this.playerType);
        if (this.playerType == 1) {
          index = index - 1 < 0 ? tracks.length - 1 : index - 1;
          this.$set(this.musiclistts, "id", tracks[index].id);
          this.$set(this.musiclistts, "name", tracks[index].name);
          this.$set(this.musiclistts, "ar", tracks[index].ar);
          this.$set(this.musiclistts, "coverImgUrl", tracks[index].al.picUrl);
        } else {
          let num = parseInt(Math.random() * this.musiclistts.tracks.length);
          this.$set(this.musiclistts, "id", tracks[num].id);
          this.$set(this.musiclistts, "name", tracks[num].name);
          this.$set(this.musiclistts, "ar", tracks[num].ar);
          this.$set(this.musiclistts, "coverImgUrl", tracks[num].al.picUrl);
        }
      } else {
        alert("没有歌曲啦");
        this.$refs.audio.pause();
      }
    },

    // 下一曲
    lowerFun() {
      if (this.musiclistts.tracks.length) {
        let { id, tracks } = this.musiclistts;
        // 返回数组下标
        // console.log(this.musiclistts);
        // console.log({id,tracks,coverImgUrl});
        let index = tracks.findIndex((item) => {
          // console.log(item.id);
          return item.id == id;
        });

        if (this.playerType == 1) {
          index = index + 1 > tracks.length - 1 ? 0 : index + 1;
          this.$set(this.musiclistts, "id", tracks[index].id);
          this.$set(this.musiclistts, "name", tracks[index].name);
          this.$set(this.musiclistts, "ar", tracks[index].ar);
          this.$set(this.musiclistts, "coverImgUrl", tracks[index].al.picUrl);
        } else {
          let num = parseInt(Math.random() * this.musiclistts.tracks.length);
          this.$set(this.musiclistts, "id", tracks[num].id);
          this.$set(this.musiclistts, "name", tracks[num].name);
          this.$set(this.musiclistts, "ar", tracks[num].ar);
          this.$set(this.musiclistts, "coverImgUrl", tracks[num].al.picUrl);
        }
      } else {
        alert("没有歌曲啦");
        this.$refs.audio.pause();
      }
    },

    //音乐加载后调用
    canplayFun() {
      // console.log("数据加载完毕");
      this.timeright = this.$refs.audio.duration;
      // this.timeleft = 0;
      this.iconplay = true; //播放
      this.toggleplay();
    },

    // 获取歌词
    getSongLyricFun() {
      this.lyricTop = "300px";
      this.currentRow = 0;
      let lyrictip = "歌词 [00:00.000] 还没有上传歌词";
      getSongLyric({ id: this.musiclistts.id }).then((data) => {
        console.log(data.lrc);
        // console.log(data.lrc.lyric.indexOf("[") > -1);
        if (data.lrc != undefined && data.lrc.lyric.indexOf("[") > -1) {
          this.formatLyric(data.lrc.lyric);
        } else {
          this.formatLyric(lyrictip);
        }
      });
    },

    // 处理歌词结构
    formatLyric(text) {
      // console.log("歌词",text);
      if (text) {
        this.lyric = [];
        let arr = text.split("\n"); //把原歌词字符串转为数组
        let row = arr.length; //获取数组长度
        for (let i = 0; i < row; i++) {
          let temp_row = arr[i]; //获取数据[00:00.000]作词 : G.E.M.邓紫棋"
          let temp_arr = temp_row.split("]"); //分为两个数组
          // [00:00.000      作词 : G.E.M.邓紫棋
          let text = temp_arr.pop(); //删除数组最后一位，返回删除数据
          temp_arr.forEach((element) => {
            let obj = {};
            let time_arr = element.substr(1, element.length - 1).split(":");
            //02:00.000获取时间数据
            let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]);
            //当前秒数
            obj.time = s;
            obj.text = text;
            if (text.length > 0) {
              this.lyric.push(obj); //每一行处理好数据放入数组
            }
          });
        }
      }
    },

    // 音乐播放结束
    musicEnd() {
      console.log("音乐播放结束");
      this.iconplay = true;
      // this.$refs.audio.play(); //播放
      clearInterval(this.clearset);
      if (this.playerType == 1) {
        //列表播放
        this.lowerFun();
        this.iconplay = false;
      } else {
        //随机播放
        let num = parseInt(Math.random() * this.musiclistts.tracks.length);
        console.log(num);
        let { tracks } = this.musiclistts;
        this.$set(this.musiclistts, "id", tracks[num].id);
        this.$set(this.musiclistts, "name", tracks[num].name);
        this.$set(this.musiclistts, "ar", tracks[num].ar);
        this.$set(this.musiclistts, "coverImgUrl", tracks[num].al.picUrl);
      }
    },

    // 修改类型
    changeMode() {
      this.playerType = this.playerType == 1 ? 2 : 1;
      console.log(this.playerType);
    },
  },
  computed: {
    musicData() {
      return this.$store.state.musicData;
    },
    musiclistts() {
      return this.$store.state.musiclistts;
    },
  },
  // 获取数据
  created() {
    //获取数据
    // window.addEventListener("setItem", () => {
    //   this.musicData = this.resetSetItem.fetch();
    //   console.log("11111",this.musicData);
    // });
  },
  filters: {
    playertime(data) {
      // console.log(data);
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      s = s < 10 ? "0" + s : s;
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + s;
      }
    },
  },
  beforeDestroy() {
    //销毁清除定时器
    clearInterval(this.clearset); //清除定时器
  },
};
</script>

<style lang="less" scoped>
.box-play {
  // display: block;
  width: 640p;
  // text-align: center;
  margin: 0 auto;
}
.player {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  margin: auto;
  // background: #837f7d;
  background-size: 200%;
  background-position: center;
  background-repeat: no-repeat;
  // background: transparent;
  background-color: rgba(181, 197, 219, 0.35);
  z-index: 9999;
  .button {
    // z-index: 99999;
    position: absolute;
    top: 23px;
    left: 23px;
    width: 34px;
    height: 34px;
    span {
      display: block;
      font-size: 34px;
      height: 34px;
      color: #fff;
      font-weight: bold;
    }
  }
  .title {
    text-align: center;
    color: #fff;
    // background-color:#311C0C ;
    background: rgba(188, 204, 141, 0.9);
    h2 {
      font-size: 32px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-top: 4px;
      text-indent: 2em;
    }
    h3 {
      font-size: 28px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-indent: 2.5em;
    }
  }
  .pic {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(169, 170, 170, 0.5);
    filter: blur(10px);
    z-index: -1;
  }
  .content {
    height: 666px;
    text-align: center;
    // filter: blur(10px);
    // z-index: 9999;
    .img {
      float: left;
      width: 100%;
      margin-top: 86px;
      img {
        display: block;
        width: 468px;
        height: 468px;
        border: 15px solid #ccc;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 auto;
        &.play {
          animation: rotate 20s linear infinite;
        }
        &.pause {
          animation-play-state: paused;
        }
      }
    }
    .lyrics {
      width: 100%;
      height: 666px;
      position: relative;
      overflow: hidden;
      background-color: RGBA(135, 131, 129, 0.3);
      ul {
        position: absolute;
        width: 100%;
        min-height: 1000px;
        top: 300px;
        left: 0px;

        li {
          width: 100%;
          color: #ccc;
          text-align: center;
          height: 50px;
          line-height: 50px;
          font-size: 18px;

          &.con {
            color: #fff;
            font-weight: bold;
            font-size: 22px;
          }
        }
      }
    }
  }
  // .backcolo{
  //     // background-color: #311C0C;
  //     // height: 100%;
  //     position: fixed;
  //     bottom: 0;
  //     left: 50%;
  //     margin-left: -210px;
  // }
  .range {
    text-align: center;
    padding: 10px 0 0 0;
    .bar {
      width: 420px;
      margin: 0 auto;
      position: relative;
      font-size: 18px;
      color: #fff;
      .timeLeft {
        position: absolute;
        left: -44px;
        top: -7px;
      }
      .timeRight {
        position: absolute;
        right: -44px;
        top: -7px;
      }
    }
  }
  .buttons {
    display: flex;
    margin-top: 33px;
    // background-color: #311C0C;
    // height: 100%;
    .iconfont {
      flex: 1;
      text-align: center;
      font-size: 34px;
      color: #fff;
      height: 66px;
      line-height: 66px;
    }
    .iconbutton {
      flex: 1;
      text-align: center;
      color: #fff;
      height: 66px;
      line-height: 66px;
      .iconfont {
        display: block;
        border: 5px solid #fff;
        font-size: 20px;
        height: 55px;
        width: 55px;
        line-height: 55px;
        margin: 0 auto;
        border-radius: 50%;
      }
    }
  }
}
.min-player {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 90px;
  width: 100%;
  margin: auto;
  // background: rgba(255, 255, 255, 0.9);
  background: rgba(188, 204, 141, 0.85);
  // background-image: linear-gradient(to left,skyblue,#45DBC6,#B3C283);
  display: flex;
  .img {
    flex: 0 0 109px;
    img {
      width: 63px;
      height: 63px;
      margin: 13px 0 0 30px;
      border-radius: 50%;
      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
  }
  .text {
    flex: 1;
    h2 {
      margin-top: 20px;
      font-size: 22px;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 350px;
    }
    h3 {
      margin-top: 10px;
      font-size: 16px;
      color: #fff;
    }
  }
  .control {
    flex: 0 0 80px;
    margin: 20px 20px 0 0;
    span {
      display: block;
      font-size: 20px;
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border: 4px solid #fff;
      color: #fff;
      border-radius: 50%;
    }
  }
  .bflists {
    flex: 0 0 50px;
    margin: 20px 20px 0 0;
    color: #fff;
    span {
      font-size: 40px;
      display: block;
      text-align: center;
      cursor: pointer;
    }
  }
}
.musicbflist {
  // display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(169, 170, 170, 0.5);
  z-index: 99999;
  position: fixed;
  top: 0;
  .content {
    height: 450px;
    width: 100%;
    background-color: #f2f3f4;
    position: fixed;
    left: 0;
    // top: 630px;
    bottom: 80px;
    border-radius: 9px;
    overflow: scroll;
    dl {
      dd {
        height: 62px;
        line-height: 62px;
        font-size: 25px;
        color: #757778;
        .icon-xunhuan1 {
          margin: 0 30px;
        }
        .icon-suiji {
          margin: 0 30px;
        }
        .icon-shanchu {
          float: right;
          margin: 0 30px;
          font-size: 30px;
        }
      }
    }
    ul {
      width: 100%;
      li {
        width: 100%;
        height: 60px;
        line-height: 60px;
        .music {
          margin: 0 30px;
          display: inline-block;
          h3 {
            display: inline-block;
            color: #525456;
            font-size: 18px;
          }
        }
        span {
          color: #d02e22;
          font-size: 25px;
          float: right;
          margin-right: 30px;
        }
      }
    }
    .close {
      background-color: #f2f3f4;
      width: 100%;
      height: 80px;
      line-height: 80px;
      position: fixed;
      bottom: 0;
      text-align: center;
      z-index: 999;
      font-size: 24px;
      color: #343433;
      display: block;
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.custom-button {
  width: 5px;
  height: 5px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 50%;
  border: 8px solid #fff;
}
</style>